@import './variables.scss';

.screenPad{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;

    // 产线图
    &.line-img::before{ 
        content: "";
        width: 98%;
        height: 98%;
        background: url('~@/assets/public_images/lines.png') no-repeat;
        background-size: 70%;
        background-position: center;
        position: absolute;
        opacity: 0.2;
        z-index: -1;
    }
    
    article.tab-box{
        width: calc((100% - 30px) / 3);
        height: calc((100% - 40px) / 4);
        margin: 5px;
        flex: auto;

        &:nth-child(1){
            height: 150px;
            // flex: 1;
        }
        &:nth-child(5){
            margin-top: 50px;
            height: calc((100% - 220px) / 4);
        }

            h4.tab-box-head{
                margin-top: 0;
                margin-bottom: 2px;

                 em{
                    width: calc(100% - 90px);
                    height: 12px;
                    float: right;
                    display: flex;
                    align-items: center;
                    margin-top: 3px;

                    i:first-child{
                        display: inline-block;
                        width: 8px;
                        height: 100%;
                        background-color: $blue;
                    }
                    i:nth-child(2){
                        display: inline-block;
                        width: calc(100% - 10px);
                        height: 1px;
                        background: linear-gradient(to right, $blue, transparent);
                    }
                }

            }

            .tab-box-body{
                height: calc(100% - 20px);
                background: $boxBgc;
                box-shadow: $boxShaow;
                border-top: 3px solid rgba(89,103,164,.8);
                
                div{
                    width: 100%;
                    height: 100%;
                }
            }
    }
}

.screenPad.rightSide{
    article.tab-box:nth-child(1){
        height: 100px;

        >>> canvas{
            cursor: move;
        }
    }
}